<template>
  <el-container class="app-tools-center">
    <el-main>
      <el-row :gutter="40">
        <el-col v-for="(item, index) in appToolSceneList" :key="index" :xs="12" :md="8" :lg="6" class="list-item-box">
          <router-link :to="{name:`${item.path}`}" class="list-item clearfix">
            <div class="item-img r-2x fl">
              <img :src="item.icon" alt="">
            </div>
            <div class="item-intro fl">
              <p class="intro-title text-elepsis ng-binding">{{ item.name }}</p>
              <p class="intro-detail text-elepsis ng-binding">{{ item.description }}</p>
            </div>
          </router-link>
        </el-col>

      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { listSceneByType } from '@/api/public'
export default {
  components: {},
  props: {},
  data() {
    return {
      btnArr: [],
      appToolSceneList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    console.log('this.btnArr____', this.$store.getters.controlBtn)
    this.$store.commit('ADD_CRUMBS', this.$route)
    this.jsonStr()
    this.getSceneListByType()
  },
  methods: {
    toJSON() {},
    jsonStr() {
      var that = this
      var cache = []
      var str = JSON.stringify(that.$route, function(key, value) {
        if (typeof value === 'object' && value !== null) {
          if (cache.indexOf(value) !== -1) {
            // Circular reference found, discard key
            return
          }
          // Store value in our collection
          cache.push(value)
        }
        return value
      })
      cache = null
      sessionStorage.setItem('add_crumbs', str)
    },
    getSceneListByType() {
      listSceneByType({ type: 'APP_TOOL' }).then(res => {
        if (res) {
          this.appToolSceneList = res
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-tools-center{
  min-width: 1000px;
  .mb16{
    margin-top: 15px;
  }
}
.list-item-box {
  margin-bottom: 20px;
  padding-right: 10px;
  padding-left: 10px;
}

.list-item {
    position: relative;
    border: 1px solid #dddce2;
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    height: auto;
    width: 100%;
    .item-img{
      border-radius: 4px;
      overflow: hidden;
      min-width: inherit;

      img {
        width: 40px;
        height: 40px;
      }
    }
    .item-intro{
      display: block;
      padding-left: 10px;
      letter-spacing: 0.5px;
      .intro-title {
        font-size: 14px;
        line-height: 24px;
        color: #595961;
        margin: -4px 0 0;
        font-weight: 700;
        letter-spacing: 1px;
      }
      .text-elepsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .intro-detail {
        font-size: 12px;
        line-height: 20px;
        color: #9797A1;
        margin: 0;
      }
    }
    .fl{
      float: left;
    }
    .text-elepsis {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
}
.list-item:hover {
    background-color: #f2f2f6;
    border: 1px solid #f2f2f6;
}

</style>
